<template>
    <div class="search-book">
      <el-input placeholder="请输入内容" v-model="input" class="input-with-select">
        <el-select v-model="select" slot="prepend" placeholder="请选择">
            <el-option label="IBSN" value="book_ibsn_id"></el-option>
            <el-option label="书名" value="book_title"></el-option>
            <el-option label="作者" value="book_author"></el-option>
            <el-option label="出版社" value="book_publisher"></el-option>
        </el-select>
        <el-button slot="append" icon="el-icon-search" @click="searchBook"></el-button>
      </el-input>
        <!--    图书信息列表  -->
        <el-table
                :data="booksData"
                style="width: 100%;margin-top: 10px">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="图书封面">
                            <span>
                            <img :src="props.row.book_img" class="book-img">
                            </span>
                        </el-form-item>
                        <el-form-item label="图书名称">
                            <span>{{ props.row.book_title }}</span>
                        </el-form-item>
                        <el-form-item label="图书作者">
                            <span>{{ props.row.book_author }}</span>
                        </el-form-item>
                        <el-form-item label="图书出版社">
                            <span>{{ props.row.book_publisher }}</span>
                        </el-form-item>
                        <el-form-item label="图书出版时间">
                            <span>{{ props.row.book_pubdate }}</span>
                        </el-form-item>
                        <el-form-item label="图书页数">
                            <span>{{ props.row.book_page }}</span>
                        </el-form-item>
                        <el-form-item label="图书单价">
                            <span>{{ props.row.book_price }}</span>
                        </el-form-item>
                        <el-form-item label="图书库存数量">
                            <span>{{ props.row.book_now_number }}</span>
                        </el-form-item>
                        <el-form-item label="图书总数">
                            <span>{{ props.row.book_number }}</span>
                        </el-form-item>
                        <el-form-item label="图书库存地址">
                            <span>{{ props.row.book_address }}</span>
                        </el-form-item>
                        <el-form-item label="图书简介" style="width: 100%">
                            <span>{{ props.row.book_gist }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column
                    label="图书IBSN"
                    prop="book_ibsn_id">
            </el-table-column>
            <el-table-column
                    label="图书名称"
                    prop="book_title">
            </el-table-column>
            <el-table-column
                    label="图书作者"
                    prop="book_author">
            </el-table-column>
            <el-table-column
                    label="图书出版社"
                    prop="book_publisher">
            </el-table-column>
        </el-table>
        <!--    图书列表切换  -->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="defaultPage"
                :page-sizes="pages"
                :page-size="pages[pagesIndex]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalNumber">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "SearchBook",
        data() {
            return{
                input:'',
                select:'',
                booksData:[],
                // 图书列表分页显示
                defaultPage: 1,
                totalNumber:5,
                pages:[5,10,15,20],
                pagesIndex: 1,
            }
        },
        mounted() {
            this.getBooksList()
        },
        methods:{
            // 打开页面时,获取图书列表
            getBooksList(){
                console.log('发送书籍获取请求！')
                this.$axios.get('/books/list',{
                    params:{
                        role:this.$store.state.user.user_role
                    }
                }).then(res=>{
                    if(res.data.code === 200) {
                        this.booksData = res.data.msg
                        this.totalNumber = res.data.msg.length
                        // console.log(this.booksData);
                    }else{
                        this.$message({
                            message: '请刷新重试,若刷新后图书列表仍未加载出现,请联系管理员！',
                            type: 'warning'
                        })
                    }
                })
            },
            // 查询图书
            searchBook(){
                // console.log(this.select+this.input)
                this.$axios.get('/books/search',{
                    params: {
                        role:this.$store.state.user.user_role,
                        type:this.select,
                        input:this.input,
                    }
                }).then(res=>{
                    console.log(res.data)
                    if(res.data.code === 200){
                        this.booksData = res.data.msg
                        this.$message({
                            message: '查询成功!',
                            type: 'success'
                        })
                    }else{
                        this.$message({
                            message: '查询失败,请输入完整信息后查询！',
                            type: 'warning'
                        })
                    }
                })
            },
            // 切换每页显示的数量
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            // 切换页面
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }
        }
    }
</script>

<style scoped>
.search-book{
    text-align: center;
    margin-top: 200px;
    margin-left: 20%;
    width: 60%;
}
.demo-table-expand {
    font-size: 0;
}
.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}
.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}
.book-img{
    height: 100px;
}
</style>